<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>分析仪表盘</title>
    <style>
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
        .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .card-header { font-weight: bold; font-size: 18px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
        .metric-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .metric-card { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
        .metric-value { font-size: 24px; font-weight: bold; margin: 10px 0; }
        .metric-label { font-size: 14px; color: #666; }
        .metric-trend { font-size: 12px; margin-top: 5px; }
        .metric-trend-up { color: #28a745; }
        .metric-trend-down { color: #dc3545; }
        .filter-row { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter-item { min-width: 200px; }
        .filter-item label { display: block; margin-bottom: 5px; font-size: 14px; }
        .filter-item select, .filter-item input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary { background-color: var(--primary-color); color: white; }
        .btn-secondary { background-color: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .chart-container { height: 300px; margin-bottom: 20px; }
        .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .insight-item { padding: 15px; border-left: 3px solid var(--primary-color); background-color: #f9f9f9; margin-bottom: 15px; }
        .insight-title { font-weight: bold; margin-bottom: 5px; }
        .insight-description { font-size: 14px; color: #555; }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container">
            <div class="header">
                <h1>分析仪表盘</h1>
                <div>
                    <button class="btn btn-primary" onclick="customizeDashboard()">自定义仪表盘</button>
                </div>
            </div>
            
            <div class="filter-row">
                <div class="filter-item">
                    <label>时间范围</label>
                    <select id="timeRangeFilter" onchange="updateDashboard()">
                        <option value="day">今天</option>
                        <option value="week">本周</option>
                        <option value="month" selected>本月</option>
                        <option value="quarter">本季度</option>
                        <option value="year">本年度</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label>业务领域</label>
                    <select id="domainFilter" onchange="updateDashboard()">
                        <option value="all">所有领域</option>
                        <option value="sales">销售</option>
                        <option value="customer">客户</option>
                        <option value="service">客服</option>
                        <option value="marketing">市场营销</option>
                    </select>
                </div>
            </div>
            
            <div class="metric-cards">
                <div class="metric-card">
                    <div class="metric-label">销售额</div>
                    <div class="metric-value">¥2,458,350</div>
                    <div class="metric-trend metric-trend-up">↑ 12.5% 同比增长</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">新增客户</div>
                    <div class="metric-value">127</div>
                    <div class="metric-trend metric-trend-up">↑ 8.3% 同比增长</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">订单数</div>
                    <div class="metric-value">342</div>
                    <div class="metric-trend metric-trend-up">↑ 5.2% 同比增长</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">平均订单金额</div>
                    <div class="metric-value">¥7,188</div>
                    <div class="metric-trend metric-trend-up">↑ 3.4% 同比增长</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">活跃客户</div>
                    <div class="metric-value">845</div>
                    <div class="metric-trend metric-trend-up">↑ 6.7% 同比增长</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">客户满意度</div>
                    <div class="metric-value">4.7</div>
                    <div class="metric-trend metric-trend-up">↑ 0.3 同比增长</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">服务工单</div>
                    <div class="metric-value">235</div>
                    <div class="metric-trend metric-trend-down">↓ 4.8% 同比减少</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">平均响应时间</div>
                    <div class="metric-value">2.5小时</div>
                    <div class="metric-trend metric-trend-down">↓ 15% 同比减少</div>
                </div>
            </div>
            
            <div class="chart-grid">
                <div class="card">
                    <div class="card-header">
                        <div>销售趋势</div>
                        <div>
                            <select onchange="updateSalesTrend()">
                                <option value="revenue">销售额</option>
                                <option value="orders">订单数</option>
                                <option value="average">平均订单额</option>
                            </select>
                        </div>
                    </div>
                    <div class="chart-container">
                        <img src="https://via.placeholder.com/550x300?text=销售趋势图表" alt="销售趋势" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div>客户获取与流失</div>
                        <div>
                            <select onchange="updateCustomerChart()">
                                <option value="acquisition">客户获取</option>
                                <option value="churn">客户流失</option>
                                <option value="combined">综合视图</option>
                            </select>
                        </div>
                    </div>
                    <div class="chart-container">
                        <img src="https://via.placeholder.com/550x300?text=客户获取流失图表" alt="客户获取与流失" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <div>销售漏斗</div>
                </div>
                <div class="chart-container">
                    <img src="https://via.placeholder.com/1100x300?text=销售漏斗图表" alt="销售漏斗" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">重要洞察</div>
                
                <div class="insight-item">
                    <div class="insight-title">高价值客户互动减少</div>
                    <div class="insight-description">高价值客户群体在过去30天的互动频率下降了20%，建议主动跟进防止流失。</div>
                </div>
                
                <div class="insight-item">
                    <div class="insight-title">销售周期延长</div>
                    <div class="insight-description">企业客户的平均销售周期比上季度增长了15%，主要原因是决策流程变长。</div>
                </div>
                
                <div class="insight-item">
                    <div class="insight-title">新产品采用率高</div>
                    <div class="insight-description">新推出的企业服务套件在前30天达到了78%的试用转化率，远高于预期。</div>
                </div>
                
                <div class="insight-item">
                    <div class="insight-title">客户支持效率提升</div>
                    <div class="insight-description">通过知识库优化，首次解决率提高了23%，客户满意度相应提升。</div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            function customizeDashboard() {
                alert('打开仪表盘自定义设置');
            }
            
            function updateDashboard() {
                const timeRange = document.getElementById('timeRangeFilter').value;
                const domain = document.getElementById('domainFilter').value;
                alert('更新仪表盘: 时间=' + timeRange + ', 领域=' + domain);
                // 这里应该是实际的AJAX请求更新数据
            }
            
            function updateSalesTrend() {
                alert('更新销售趋势图表');
                // 这里应该是实际的图表更新逻辑
            }
            
            function updateCustomerChart() {
                alert('更新客户图表');
                // 这里应该是实际的图表更新逻辑
            }
        </script>
    </th:block>
</body>
</html> 